<template>
    <el-dialog append-to-body :title="dialog.title" v-if="isShow" :visible.sync="isShow" width="50%" top="8vh" size="mini" :close-on-click-modal="false">
        <el-form style="display: flex; flex-wrap: wrap; max-height: 70vh; padding-right: 15px; overflow-y: auto" :label-width="dialog?.labelWidth ?? '80px'" ref="form" :model="dialog.form" :rules="rules">
            <el-form-item
                :style="`width: ${100 / item?.split ?? 1}%`"
                v-show="(item.show !== undefined ? item.show() : true) && !item.group"
                class="item"
                :prop="item.name"
                :label="item.label"
                v-for="item in dialog.config"
                :key="item.name"
            >
                <el-input
                    class="item1"
                    @change="
                        () => {
                            if (item.onChange !== undefined) {
                                item.onChange(dialog.config, dialog.form)
                            }
                        }
                    "
                    v-if="item.type === 'input'"
                    :placeholder="item.placeholder"
                    v-model="dialog.form[item.name]"
                    :disabled="item.disable === undefined ? false : item.disable()"
                ></el-input>
                <el-input
                    class="item1"
                    type="textarea"
                    :rows="item?.rows ?? 2"
                    @change="
                        () => {
                            if (item.onChange !== undefined) {
                                item.onChange(dialog.config, dialog.form)
                            }
                        }
                    "
                    v-if="item.type === 'textarea'"
                    :placeholder="item.placeholder"
                    v-model="dialog.form[item.name]"
                    :disabled="item.disable === undefined ? false : item.disable()"
                ></el-input>
                <el-input-number
                    class="item1"
                    v-if="item.type === 'number'"
                    :min="item?.min ?? -Infinity"
                    :max="item?.max ?? Infinity"
                    :placeholder="item.placeholder"
                    v-model="dialog.form[item.name]"
                    @change="
                        () => {
                            if (item.onChange !== undefined) {
                                item.onChange(dialog.config, dialog.form)
                            }
                        }
                    "
                ></el-input-number>
                <div v-if="item.type === 'txl'" @click="toTxl(dialog.form[item.name], item.name, item.single)" class="border item1" style="height: 30px; padding: 5px 0; display: flex">
                    <div
                        class="pointer"
                        style="display: flex; width: 70px; border-radius: 4px; height: 30px; margin: 0 5px; background-color: rgba(255, 255, 255, 0.2); justify-content: space-around"
                        v-for="i in dialog.form[item.name]"
                        :key="i"
                    >
                        <div class="text">{{ i }}</div>
                    </div>
                </div>
                <zy-device class="item1" v-if="item.type === 'device'" :value="dialog.form[item.name]" @change="changeDevice"></zy-device>
                <el-switch
                    class="item1"
                    v-if="item.type === 'switch'"
                    v-model="dialog.form[item.name]"
                    :active-text="item?.options?.active?.text ?? ''"
                    :inactive-text="item?.options?.inactive?.text ?? ''"
                    :active-value="item?.options?.active?.value ?? ''"
                    :inactive-value="item?.options?.inactive?.value ?? ''"
                    @change="
                        () => {
                            if (item.onChange !== undefined) {
                                item.onChange(dialog.config, dialog.form)
                            }
                        }
                    "
                ></el-switch>
                <el-cascader
                    class="item1"
                    v-if="item.type === 'cascader'"
                    :placeholder="item.placeholder"
                    :options="item.options"
                    :show-all-levels="item?.showAllLevels ?? false"
                    :props="{ checkStrictly: item?.checkStrictly ?? true, multiple: item?.multiple ?? false }"
                    clearable
                    v-model="dialog.form[item.name]"
                    @change="
                        () => {
                            if (item.onChange !== undefined) {
                                item.onChange(dialog.config, dialog.form)
                            }
                        }
                    "
                ></el-cascader>
                <el-date-picker class="item1" v-if="item.type === 'date'" type="datetime" :placeholder="item.placeholder" v-model="dialog.form[item.name]" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                <el-color-picker class="item1" v-if="item.type === 'color'" v-model="dialog.form[item.name]"></el-color-picker>
                <el-select
                    class="item1"
                    v-if="item.type === 'select'"
                    filterable
                    clearable
                    :multiple="item?.multiple ?? false"
                    :placeholder="item.placeholder"
                    v-model="dialog.form[item.name]"
                    @change="
                        () => {
                            if (item.onChange !== undefined) {
                                item.onChange(dialog.config, dialog.form)
                            }
                        }
                    "
                >
                    <el-option v-for="i in item.options" :key="i.value" :label="i.label" :value="i.value"></el-option>
                </el-select>
                <el-select
                    class="item1"
                    v-if="item.type === 'select_id'"
                    filterable
                    clearable
                    :multiple="item?.multiple ?? false"
                    :placeholder="item.placeholder"
                    v-model="dialog.form[item.name]"
                    @change="
                        () => {
                            if (item.onChange !== undefined) {
                                item.onChange(dialog.config, dialog.form)
                            }
                        }
                    "
                >
                    <el-option v-for="i in item.options" :key="i.id" :label="i.name" :value="i.id"></el-option>
                </el-select>
                <el-select
                    class="item1"
                    v-if="item.type === 'select_s'"
                    clearable
                    :multiple="item?.multiple ?? false"
                    :placeholder="item.placeholder"
                    v-model="dialog.form[item.name]"
                    @change="
                        () => {
                            if (item.onChange !== undefined) {
                                item.onChange(dialog.config, dialog.form)
                            }
                        }
                    "
                >
                    <el-option v-for="i in item.options" :key="i[item?.defaultProps.value ?? 'id']" :label="i[item?.defaultProps.label ?? 'label']" :value="i[item?.defaultProps.value ?? 'value']"></el-option>
                </el-select>
                <zy-image class="item1" v-if="item.type === 'image'" :multiple="item?.multiple ?? false" :name="item.name" :url="dialog.form[item.name]" @url="url"></zy-image>
                <zy-image class="item1" v-if="item.type === 'dimg'" :dimg="'dimg'" :multiple="item?.multiple ?? false" :name="item.name" :url="dialog.form[item.name]" @url="url"></zy-image>
                <zy-file class="item1" v-if="item.type === 'file'" :action="item?.action ?? ''" :accept="item?.accept ?? ''" @filepath="handSuccess"></zy-file>
                <div class="subItem" :style="`overflow-x: ${selece(item.name).config.length > 4 ? 'auto' : 'hidden'}`" v-if="item.type === 'form'">
                    <div class="subItem1">
                        <div class="subItem2" :style="`flex-grow: ${selece(item.name).config.length > 4 ? 0 : 1}`" v-for="(subItem, subIndex) in item.config" :key="subItem.name">
                            <div class="subItem3">
                                <div style="flex-shrink: 0">{{ subItem.label }}</div>
                            </div>
                            <div v-for="(content, index) in dialog.form[item.name]" :key="index">
                                <div v-if="subItem.type === 'input'" class="subItem4">
                                    <el-input style="width: calc(100% - 10px)" v-model="content[subItem.name]" :disabled="subItem.disable === undefined ? false : subItem.disable()"></el-input>
                                </div>
                                <div v-if="subItem.type === 'textarea'" class="subItem4">
                                    <el-input
                                        style="width: calc(100% - 10px)"
                                        type="textarea"
                                        :rows="subItem?.rows ?? 2"
                                        v-model="content[subItem.name]"
                                        :disabled="subItem.disable === undefined ? false : subItem.disable()"
                                    ></el-input>
                                </div>
                                <div v-if="subItem.type === 'number'" class="subItem4">
                                    <el-input-number style="width: calc(100% - 10px)" :min="subItem?.min ?? -Infinity" :max="subItem?.max ?? Infinity" v-model="content[subItem.name]"></el-input-number>
                                </div>
                                <div v-if="subItem.type === 'date'" class="subItem4">
                                    <el-date-picker style="width: calc(100% - 10px)" type="datetime" v-model="content[subItem.name]" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                                </div>
                                <div v-if="subItem.type === 'switch'" class="subItem4">
                                    <el-switch
                                        style="width: calc(100% - 10px)"
                                        v-model="content[subItem.name]"
                                        :active-text="subItem?.options?.active?.text ?? ''"
                                        :inactive-text="subItem?.options?.inactive?.text ?? ''"
                                        :active-value="subItem?.options?.active?.value ?? ''"
                                        :inactive-value="subItem?.options?.inactive?.value ?? ''"
                                    ></el-switch>
                                </div>
                                <div v-if="subItem.type === 'select'" class="subItem4">
                                    <el-select style="width: calc(100% - 10px)" clearable :multiple="subItem?.multiple ?? false" v-model="content[subItem.name]">
                                        <el-option v-for="i in subItem.options" :key="i.value" :label="i.label" :value="i.value"></el-option>
                                    </el-select>
                                </div>
                            </div>
                        </div>
                        <div class="subItem2" style="width: 38px" v-if="dialog.form[item.name].length > 1 && !item.fixed">
                            <div class="subItem3">
                                <div style="flex-shrink: 0">删除</div>
                            </div>
                            <div v-for="(content, index) in dialog.form[item.name]" :key="index">
                                <div @click="deleteItem(item.name, index)" class="subItem4 pointer">
                                    <div>
                                        <i class="el-icon-delete"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div @click="addItem(item.name)" v-show="(item?.max ?? 40) !== dialog.form[item.name].length && !item.fixed" style="color: #0cd9e8; margin-left: 8px; cursor: pointer">添加数据</div>
                </div>
            </el-form-item>
            <el-tabs type="card" v-model="activeName" style="width: 100%">
                <el-tab-pane v-for="tab in dialog.group" :key="tab" class="sel" :label="tab" :name="tab">
                    <el-form-item
                        :style="`width: ${100 / item?.split ?? 1}%`"
                        v-show="(item.show !== undefined ? item.show() : true) && item.group && item.group === tab"
                        class="item"
                        :prop="item.name"
                        :label="item.label"
                        v-for="item in dialog.config"
                        :key="item.name"
                    >
                        <el-input
                            class="item1"
                            @change="
                                () => {
                                    if (item.onChange !== undefined) {
                                        item.onChange(dialog.config, dialog.form)
                                    }
                                }
                            "
                            v-if="item.type === 'input'"
                            :placeholder="item.placeholder"
                            v-model="dialog.form[item.name]"
                            :disabled="item.disable === undefined ? false : item.disable()"
                        ></el-input>
                        <el-input
                            class="item1"
                            type="textarea"
                            :rows="item?.rows ?? 2"
                            @change="
                                () => {
                                    if (item.onChange !== undefined) {
                                        item.onChange(dialog.config, dialog.form)
                                    }
                                }
                            "
                            v-if="item.type === 'textarea'"
                            :placeholder="item.placeholder"
                            v-model="dialog.form[item.name]"
                            :disabled="item.disable === undefined ? false : item.disable()"
                        ></el-input>
                        <el-input-number
                            class="item1"
                            v-if="item.type === 'number'"
                            :min="item?.min ?? -Infinity"
                            :max="item?.max ?? Infinity"
                            :placeholder="item.placeholder"
                            v-model="dialog.form[item.name]"
                        ></el-input-number>
                        <zy-device class="item1" v-if="item.type === 'device'" :value="dialog.form[item.name]" @change="changeDevice"></zy-device>
                        <el-switch
                            class="item1"
                            v-if="item.type === 'switch'"
                            v-model="dialog.form[item.name]"
                            :active-text="item?.options?.active?.text ?? ''"
                            :inactive-text="item?.options?.inactive?.text ?? ''"
                            :active-value="item?.options?.active?.value ?? ''"
                            :inactive-value="item?.options?.inactive?.value ?? ''"
                            @change="
                                () => {
                                    if (item.onChange !== undefined) {
                                        item.onChange(dialog.config, dialog.form)
                                    }
                                }
                            "
                        ></el-switch>
                        <el-cascader
                            class="item1"
                            v-if="item.type === 'cascader'"
                            :placeholder="item.placeholder"
                            :options="item.options"
                            :show-all-levels="item?.showAllLevels ?? false"
                            :props="{ checkStrictly: item?.checkStrictly ?? true, multiple: item?.multiple ?? false }"
                            clearable
                            v-model="dialog.form[item.name]"
                            @change="
                                () => {
                                    if (item.onChange !== undefined) {
                                        item.onChange(dialog.config, dialog.form)
                                    }
                                }
                            "
                        ></el-cascader>
                        <el-date-picker class="item1" v-if="item.type === 'date'" type="datetime" :placeholder="item.placeholder" v-model="dialog.form[item.name]" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                        <el-color-picker class="item1" v-if="item.type === 'color'" v-model="dialog.form[item.name]"></el-color-picker>
                        <div v-if="item.type === 'txl'" @click="toTxl(dialog.form[item.name], item.name, item.single)" class="border item1" style="height: 30px; padding: 5px 0; display: flex">
                            <div
                                class="pointer"
                                style="display: flex; width: 70px; border-radius: 4px; height: 30px; margin: 0 5px; background-color: rgba(255, 255, 255, 0.2); justify-content: space-around"
                                v-for="i in dialog.form[item.name]"
                                :key="i"
                            >
                                <div class="text">{{ i }}</div>
                            </div>
                        </div>

                        <el-select
                            class="item1"
                            v-if="item.type === 'select'"
                            filterable
                            clearable
                            :multiple="item?.multiple ?? false"
                            :placeholder="item.placeholder"
                            v-model="dialog.form[item.name]"
                            @change="
                                () => {
                                    if (item.onChange !== undefined) {
                                        item.onChange(dialog.config, dialog.form)
                                    }
                                }
                            "
                        >
                            <el-option v-for="i in item.options" :key="i.value" :label="i.label" :value="i.value"></el-option>
                        </el-select>
                        <el-select
                            class="item1"
                            v-if="item.type === 'select_id'"
                            filterable
                            clearable
                            :multiple="item?.multiple ?? false"
                            :placeholder="item.placeholder"
                            v-model="dialog.form[item.name]"
                            @change="
                                () => {
                                    if (item.onChange !== undefined) {
                                        item.onChange(dialog.config, dialog.form)
                                    }
                                }
                            "
                        >
                            <el-option v-for="i in item.options" :key="i.id" :label="i.name" :value="i.id"></el-option>
                        </el-select>
                        <el-select
                            class="item1"
                            v-if="item.type === 'select_s'"
                            clearable
                            :multiple="item?.multiple ?? false"
                            :placeholder="item.placeholder"
                            v-model="dialog.form[item.name]"
                            @change="
                                () => {
                                    if (item.onChange !== undefined) {
                                        item.onChange(dialog.config, dialog.form)
                                    }
                                }
                            "
                        >
                            <el-option v-for="i in item.options" :key="i[item?.defaultProps.value ?? 'id']" :label="i[item?.defaultProps.label ?? 'label']" :value="i[item?.defaultProps.value ?? 'value']"></el-option>
                        </el-select>
                        <zy-image class="item1" v-if="item.type === 'image'" :multiple="item?.multiple ?? false" :name="item.name" :url="dialog.form[item.name]" @url="url"></zy-image>
                        <zy-file class="item1" v-if="item.type === 'file'" :action="item?.action ?? ''" :accept="item?.accept ?? ''" @filepath="handSuccess"></zy-file>
                        <div class="subItem" :style="`overflow-x: ${selece(item.name).config.length > 3 ? 'auto' : 'hidden'}`" v-if="item.type === 'form'">
                            <div class="subItem1">
                                <div class="subItem2" :style="`flex-grow: ${selece(item.name).config.length > 3 ? 0 : 1}`" v-for="(subItem, subIndex) in item.config" :key="subItem.name">
                                    <div class="subItem3">
                                        <div style="flex-shrink: 0">{{ subItem.label }}</div>
                                    </div>
                                    <div v-for="(content, index) in dialog.form[item.name]" :key="index">
                                        <div v-if="subItem.type === 'input'" class="subItem4">
                                            <el-input style="width: calc(100% - 10px)" v-model="content[subItem.name]" :disabled="subItem.disable === undefined ? false : subItem.disable()"></el-input>
                                        </div>
                                        <div v-if="subItem.type === 'textarea'" class="subItem4">
                                            <el-input
                                                style="width: calc(100% - 10px)"
                                                type="textarea"
                                                :rows="subItem?.rows ?? 2"
                                                v-model="content[subItem.name]"
                                                :disabled="subItem.disable === undefined ? false : subItem.disable()"
                                            ></el-input>
                                        </div>
                                        <div v-if="subItem.type === 'number'" class="subItem4">
                                            <el-input-number style="width: calc(100% - 10px)" :min="subItem?.min ?? -Infinity" :max="subItem?.max ?? Infinity" v-model="content[subItem.name]"></el-input-number>
                                        </div>
                                        <div v-if="subItem.type === 'date'" class="subItem4">
                                            <el-date-picker style="width: calc(100% - 10px)" type="datetime" v-model="content[subItem.name]" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                                        </div>
                                        <div v-if="subItem.type === 'switch'" class="subItem4">
                                            <el-switch
                                                style="width: calc(100% - 10px)"
                                                v-model="content[subItem.name]"
                                                :active-text="subItem?.options?.active?.text ?? ''"
                                                :inactive-text="subItem?.options?.inactive?.text ?? ''"
                                                :active-value="subItem?.options?.active?.value ?? ''"
                                                :inactive-value="subItem?.options?.inactive?.value ?? ''"
                                            ></el-switch>
                                        </div>
                                        <div v-if="subItem.type === 'select'" class="subItem4">
                                            <el-select style="width: calc(100% - 10px)" clearable :multiple="subItem?.multiple ?? false" v-model="content[subItem.name]">
                                                <el-option v-for="i in subItem.options" :key="i.value" :label="i.label" :value="i.value"></el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                </el-tab-pane>
            </el-tabs>
            <el-form-item style="width: 100%" v-if="btnType != 'view'">
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="() => (this.isShow = false)">取消</el-button>
            </el-form-item>
        </el-form>
        <txl ref="txl" @setTxl="setTxl"></txl>
    </el-dialog>
</template>

<script>
import zyDevice from '@/components/common/zyDevice.vue'
import zyImage from '@/components/common/zyImage.vue'
import zyFile from '@/components/common/zyFile.vue'
import txl from '@/components/txl/select.vue'
import { deepClone } from '@/plugins/clone'
export default {
    data() {
        return {
            rules: {},
            isShow: false,
            btnType: '',
            activeName: '',
        }
    },
    components: {
        zyDevice,
        zyImage,
        zyFile,
        txl,
    },
    props: {
        dialog: {
            type: Object,
            default() {
                return {
                    labelWidth: '80px',
                    config: [],
                    form: {},
                    title: '',
                }
            },
        },
    },
    computed: {},
    methods: {
        toTxl(list, name, single) {
            this.$refs.txl.doOpen(list, name, single)
        },
        setTxl(data) {
            this.dialog.form[data.name] = data.list
        },
        openDialog(btnType) {
            this.isShow = true
            this.btnType = btnType
            this.dialog.config.map((item) => {
                if (item.onChange !== undefined) {
                    item.onChange(this.dialog.config, this.dialog.form)
                }
                let rules = item?.validators ?? []
                if (item.required) {
                    rules.push({ required: true, message: item.label + '不能为空！', trigger: 'blur' })
                }
                this.rules[item.name] = rules
            })
            if (this.dialog.group && this.dialog.group.length !== 0) {
                this.activeName = this.dialog.group[0]
            }
        },
        closeDialog() {
            this.isShow = false
        },
        changeDevice(e) {
            this.dialog.form.device = e
            this.dialog.form.device_id = e[e.length - 1]
            let device = this.dialog.config.find((item) => item.type === 'device')
            if (device?.all ?? false) {
                this.dialog.form.group_id = e[0]
                this.dialog.form.company_id = e[1]
                this.dialog.form.factory_id = e[2]
                this.dialog.form.zone_id = e[3]
            }

            if (device.onChange !== undefined) {
                device.onChange(this.dialog.config, this.dialog.form)
            }
        },
        url(data) {
            this.dialog.form[data.name] = data.url
        },
        subUrl(data) {
            this.dialog.form[data.name][data.index][data.subName] = data.url
        },
        handSuccess(file) {
            this.dialog.form[this.dialog.config.find((item) => item.type === 'file').name] = file
        },
        onSubmit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.btnType == 'add') {
                        this.$emit('add', this.dialog.form)
                    } else {
                        this.$emit('set', this.dialog.form)
                    }
                } else {
                    this.$message.error('验证未通过！')
                }
            })
        },
        addItem(name) {
            this.dialog.form[name].push(deepClone(this.selece(name).baseForm))
        },
        deleteItem(name, index) {
            this.dialog.form[name].splice(index, 1)
        },
        selece(name) {
            return this.dialog.config.find((item) => item.name === name)
        },
    },
}
</script>

<style lang="less" scoped>
.text {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: #b2e3ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.border {
    border: 1px solid #007bff;
    border-radius: 4px;
    overflow-x: auto;
}
.item {
    width: 100%;

    item1 {
        width: 90%;
    }
}

::-webkit-scrollbar {
    width: 7px;
    /*滚动条宽度*/
    height: 7px;
    /*滚动条高度*/
    background-color: #06275b;
    border-radius: 4px;
}
.subItem {
    box-sizing: border-box;
    width: 100%;
    overflow-x: auto;
    border: #007bff solid 1px;
    border-radius: 5px;
    .subItem1 {
        display: flex;
        flex-wrap: nowrap;
        color: #fff;
        .subItem2 {
            width: 160px;
            flex-grow: 0;
            flex-shrink: 0;
            .subItem3 {
                width: calc(100% - 10px);
                padding: 0 5px;
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: #007bff solid 1px;
                border-right: #007bff solid 1px;

                i {
                    flex-shrink: 0;
                    width: 10px !important;
                    font-size: 16px;
                    cursor: pointer;
                }
            }

            .subItem4 {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 50px;
                border-bottom: #007bff solid 1px;
                border-right: #007bff solid 1px;
            }
        }
    }
}
</style>
